<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'

const router = useRouter()
const userStore = useUserStore()
const visible = ref(false)

// 退出登录
const handleLogout = () => {
  // 清除用户信息
  userStore.setToken('')
  userStore.setUsername('')
  userStore.setUserId('')
  
  // 关闭弹窗
  visible.value = false
  
  // 跳转到登录页
  router.push('/login')
}
</script>

<template>
  <el-popover :visible="visible" placement="top" :width="160" :aria-hidden="!visible">
    <p>确认退出登录?</p>
    <div style="text-align: right; margin: 0">
      <el-button size="small" text @click="visible = false">取消</el-button>
      <el-button size="small" type="primary" @click="handleLogout">
        确定
      </el-button>
    </div>
    <template #reference>
      <div @click="visible = true" class="iconfont logout-icon">&#xe60d;</div>
    </template>
  </el-popover>
</template>

<style lang="less" scoped>
.logout-icon {
  font-size: 33px;
  color: #a3a3a3;
  cursor: pointer;
}
</style> 